<template>
  <div class="app" id="pageId">
    <div class="imgBox" >
        <div class="title">
          <div class="titleText">
            出入校数据看板
          </div>
          <span class="date">{{date}}  {{weekday}} 
                  <a-button  type="primary" @click="Fullscreen"> {{'显示/退出全屏'}}</a-button>
          </span> 
        </div>
        <div class="contentBox"  >
      
          <div class="itemBox flex3 " style="height:35.5vh">
            <div class="itemTitle">
              各年级学生在校率
            </div>
            <div class="contentTitle1">
              <div class="item"  v-if="atSchoolStatisticsArr[0]">{{atSchoolStatisticsArr[0].gradeName}} 总人数{{atSchoolStatisticsArr[0].studentCount}}</div>
              <div class="item"  v-if="atSchoolStatisticsArr[1]">{{atSchoolStatisticsArr[1].gradeName}} 总人数{{atSchoolStatisticsArr[1].studentCount}}</div>
              <div class="item"  v-if="atSchoolStatisticsArr[2]">{{atSchoolStatisticsArr[2].gradeName}} 总人数{{atSchoolStatisticsArr[2].studentCount}}</div>
            </div>
            <div class="content1">
                  <pie :chartData="pieData1" height="220px" width="30%" :option="{ title: { text: '', left: 'center' }}" />
                  <pie :chartData="pieData2" height="220px" width="30%" :option="{ title: { text: '', left: 'center' } }" />
                  <pie :chartData="pieData3" height="220px" width="30%" :option="{ title: { text: '', left: 'center' } }" />
            </div>
          </div>
          <div class="itemBox flex2" style="height:34.5vh">
            <div class="itemTitle">
              访客统计
            </div>
            <div class="content2">
              <div class="item">
                <div class="label">约访总数</div>
                <div class="val" style="color:#41fdef;">{{visitTotal.appointmentCount}}</div>
              </div>
              <div class="item">
                <div class="label">待签到</div>
                <div class="val" style="color:#007ad9;">{{visitTotal.notVisitCount}}</div>
              </div>
              <div class="item">
                <div class="label">已签到</div>
                <div class="val" style="color:#ef5b1d;">{{visitTotal.visitedCount}}</div>
              </div>
              <!-- <div class="item">
                <div class="label">已签离</div>
                <div class="val" style="color:#ca72ce;">18</div>
              </div> -->
            </div>
          </div>

          <div class="itemBox flex3" style="height:30.5vh">
            <div class="itemTitle">
              学生出校动态
            </div>
            <div class="content3" style="">
                <div class="row" >
                  <div class="cell">班级</div>
                  <div class="cell">姓名</div>
                  <div class="cell">学号</div>
                  <div class="cell">出校时间</div>
                  <!-- <div class="cell">出校事由</div> -->
                </div>
                <div class="content3Box" id="AccessRecordId">
                  <div class="row" v-for="(item,index) in AccessRecordArr" :key="index" >
                    <div class="cell">{{item.departmentName}}</div>
                    <div class="cell">{{item.personName}}</div>
                    <div class="cell">{{item.personCode}}</div>
                    <div class="cell">{{item.accessDate}}</div>
                  </div>
                </div>
               
            </div>
          </div>
          <div class="itemBox flex2" style="height:30.5vh">
            <div class="itemTitle">
              病假病症分类统计
            </div>
            <div class="content4">
              <Bar :chartData="barDataSource" height="200px" :option="{ title: { text: '', left: 'center' } ,color:['#ea5e23','#f9b723','#42feef']}"></Bar>
            </div>
          </div>
          <div class="itemBox flex1" >
              <div class="itemTitle">
                学生统计
              </div>
              <div class="content5">
              <div class="item">
                <div class="label">总人数</div>
                <div class="val" style="color:#41fdef;">{{StudentStatisticsTotal.studentCount}}</div>
              </div>
              <div class="item">
                <div class="label">在校</div>
                <div class="val" style="color:#007ad9;">{{StudentStatisticsTotal.atSchoolCount}}</div>
              </div>
              <div class="item">
                <div class="label">离校</div>
                <div class="val" style="color:#ef5b1d;">{{StudentStatisticsTotal.leaveCount}}</div>
              </div>
              <div class="item">
                <div class="label">临时出校</div>
                <div class="val" style="color:#f8b623;">{{StudentStatisticsTotal.tmpLeaveCount}}</div>
              </div>
              <div class="item">
                <div class="label">请假</div>
                <div class="val" style="color:#ca73ce;">{{StudentStatisticsTotal.askForLeaveCount}}</div>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>

</template>

<script lang="ts"  setup>
  import {ref, reactive, computed, unref, onUnmounted, onBeforeUnmount,onMounted} from 'vue';
  import {onMountedOrActivated} from "@/hooks/core/onMountedOrActivated";
  import dayjs from 'dayjs';
  import Pie from '/@/components/chart/Pie.vue';
  import Bar from '/@/components/chart/Bar.vue';
  import {atSchoolStatistics,visitStatistics,channelAccessRecord,askForLeaveStatistics,studentStatistics} from './channel.api'
  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';

  
  import { triggerWindowResize } from '/@/utils/event';
  const { getShowMenu, setMenuSetting } = useMenuSetting();
  const { getShowHeader, setHeaderSetting } = useHeaderSetting();
  const { setMultipleTabSetting } = useMultipleTabSetting();


  const date = ref();
  const timer = ref();
  const weekday = ref(dayjs().format('dddd')) 

  const atSchoolStatisticsArr = ref([])
  const visitTotal = ref({})
  const AccessRecordArr = ref({})
  const askForLeaveArr = ref({})
  
  const pieData1 = ref([])

   const pieData2 = ref([])

  const pieData3 = ref([])

  const barDataSource = ref([
    // {
    //   name : '发热',
    //   value: '10',
    //   style: {
    //         color: '#ea5e23',
    //   }
    // },
    // {
    //   name : '咳嗽',
    //   value: '9',
    //    itemStyle: {
    //         color: '#f9b723'
    //   }
    // },
    // {
    //   name : '其他',
    //   value: '3',
    //    itemStyle: {
    //         color: '#1dc8fc'
    //   }
    // },
  ])

  const StudentStatisticsTotal = ref({}) 

// let fullBool =  ref(2)
if(!localStorage.fullBool) localStorage.fullBool = 2
let fullBool =  localStorage.fullBool

function getAtSchoolStatistics(){
  atSchoolStatistics().then(res=>{
    atSchoolStatisticsArr.value = res
    console.log(atSchoolStatisticsArr.value);
    pieData1.value = []
    pieData2.value = []
    pieData3.value = []
    res.forEach((item,index)=>{
      if(index==0){
        pieData1.value.push({ 
          value: item.atSchoolCount, 
          name: '在校',
          itemStyle: {
                color: '#3e8bff'
          }
        },)
        pieData1.value.push({ 
          value: item.leaveCount, 
          name: '离校',
          itemStyle: {
                color: '#f3f3f3'
          }
        },)
      }else if(index==1){
         pieData2.value.push({ 
          value: item.atSchoolCount, 
          name: '在校',
          itemStyle: {
                color: '#3e8bff'
          }
        },)
        pieData2.value.push({ 
          value: item.leaveCount, 
          name: '离校',
          itemStyle: {
                color: '#f3f3f3'
          }
        },)
      }else if(index==2){
         pieData3.value.push({ 
          value: item.atSchoolCount, 
          name: '在校',
          itemStyle: {
                color: '#ea5e23'
          }
        },)
        pieData3.value.push({ 
          value: item.leaveCount, 
          name: '离校',
          itemStyle: {
                color: '#f3f3f3'
          }
        },)
      }

    })
    //  pieData1.value[0].value = res[0].
  })
}
function getVisitStatistics(){
  visitStatistics().then(res=>{
    visitTotal.value = res
  })
}

function getChannelAccessRecord(){
  channelAccessRecord().then(res=>{
    AccessRecordArr.value = res
  })
}

function getAskForLeaveStatistics(){
  askForLeaveStatistics().then(res=>{
    // askForLeaveArr.value =res
    barDataSource.value = []
    res.forEach((item,index)=>{
        if(index<9){
          barDataSource.value.push({
              name : item.item,
              value: item.cnt,
          })
        }
      
    })
  })
}

function getStudentStatistics(){
  studentStatistics().then(res=>{
    StudentStatisticsTotal.value = res
  })
}

function Fullscreen(){
    if(localStorage.fullBool==2){
        localStorage.fullBool=1
        console.log(localStorage.fullBool);
         setHeaderSetting({ 
          show: false,
        });
        setMultipleTabSetting({
          show:false
        })
      setTimeout(()=>{
        localStorage.fullBool=1
        localStorage.fullBool=1
       document.documentElement.webkitRequestFullscreen();
       setMenuSetting({
            show: false,
            hidden: true,
          });
      },500)
    }else if(localStorage.fullBool==1){
        localStorage.fullBool=2
        console.log(333);
        console.log(localStorage.fullBool);
        setHeaderSetting({ show: true });
         setMultipleTabSetting({
          show:true
        })
          document.webkitExitFullscreen();
  setMenuSetting({
            show: true,
            hidden: false,
          });
      setTimeout(()=>{
          setMenuSetting({
            show: true,
            hidden: false,
          });

        if (document.exitFullScreen) {
          document.exitFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      },500)
    }
}

onMounted(()=>{
  getAtSchoolStatistics()
  getVisitStatistics()
  getChannelAccessRecord()
  getAskForLeaveStatistics()
  getStudentStatistics()
  // Fullscreen()

  // pageDiv.webkitRequestFullscreen();
})

const tabelTimer = ({})
const ajaxTimer = ({})

onMountedOrActivated(()=>{
  timer.value = setInterval(function() {date.value = dayjs().format('YYYY-MM-DD HH:mm:ss');}, 1000);

  let AccessRecordId = document.getElementById("AccessRecordId");

  tabelTimer.value = setInterval(()=>{
     if(AccessRecordId.scrollTop+135>=AccessRecordId.scrollHeight){
        AccessRecordId.scrollTop = 0;
      }else{
        AccessRecordId.scrollTop = AccessRecordId.scrollTop+1;
      }
  },50)

  ajaxTimer.value = setInterval(()=>{
     getAtSchoolStatistics()
     getVisitStatistics()
     getChannelAccessRecord()
     getAskForLeaveStatistics()
     getStudentStatistics()
  },300000)
})

onBeforeUnmount(()=>{
  if(timer.value) {
    clearInterval(timer.value);
    }
  if(tabelTimer.value) {
    clearInterval(tabelTimer.value);
  }
  if(ajaxTimer.value) {
    clearInterval(ajaxTimer.value);
  }
})

</script>

<style lang="less" scoped>
  :deep(.jeecg-setting-drawer-fearure) {
    display: none !important;
  }
  .app{
    height: 100%;
    width: 100%;
  }
  .imgBox{
    position: relative;
    /* 目标宽高 */
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(/@/assets/images/guard/bg.png);
    background-size: cover;
    .title{
      color: #fff;
      position: relative;
      .titleText{
         position: absolute;
         left: 50%;
         top: 0px; 
         transform: translate(-50%, 0%); 
         font-size: 60px;
      }
      .date{
        position: absolute;
        right: 115px;
        top: 26px;
        font-size: 20px;
      }
    }
    .contentBox{
        background-image: url(/@/assets/images/guard/borderBg.png);
        background-size: cover;
        width: 98%;
        height: 91%;
        margin: 60px auto 30px;
        display: flex;
        padding: 80px 30px 40px;
        flex-wrap: wrap;
        justify-content: space-around;

        .itemBox{
          background: #001e26;
          height: 32.5vh;
          position: relative;
          border: 1px solid #21c7f9;
          border-radius: 10px;
          padding: 16px;
          .itemTitle{
            height: 45px;
            width: 260px;
            color: #fdfafd;
            font-size: 22px;
            font-weight: 600;
            display: flex;
            align-items: center;
            padding-left: 30px;
            background-image:url(/@/assets/images/guard/title.png);
            background-size:cover;
          }
        }
        .flex3{
          width: 60%;
          
        }
        .flex2{
          width: 37%;
        }
         .flex1{
          width: 90%;
          height: 10% !important;
          display: flex;
        }
    }
  }


  .box1{
       &::before {
            content: "";
            width: 100%;
            height: 0;
            position: absolute;
            top: 0px;
            left: 0px;
            border-bottom: 29px solid #001e26;
            border-left: 29px solid #0f5eca;
            border-right: 29px solid #009eb5;
          }
          &::after {
            content: "";
            width: 100%;
            height: 0;
            position: absolute;
            bottom: 0;
            left: 0;
            border-top: 29px solid #001e26;
            border-left: 29px solid #1457c0;
            border-right: 29px solid #046cde;
          }
  }

  .contentTitle1{
    display: flex;
    width: 100%;
    padding: 5px;
    justify-content: space-around;
    .item{
      //flex: 1;
      display: flex;
      justify-content: center;
      color: #fff;
    }
  }

  .content1{
    display: flex;
    justify-content: space-evenly;
    height: 75%;
  }

  .content2{
    display: flex;
    width: 100%;
    .item{
      margin-top: 40px;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      border-right: 2px solid #1ac9fb;
      height: 130px;
      .label{
        color: #f2f6f4;
        font-size: 20px;
      }
      .val{
        font-size: 30px;
        color: #f2f6f4;
        font-weight: 600;
      }
      &:last-child{
        border-right: 0;
      }
    }
  }

  .content3Box{
    //overflow: auto;
    overflow: hidden;
    height: 135px;
  }

  .content3Box:hover{
  }

  .content3{
    height: 190px;
    .row{
      display: flex;
      position: relative;
      .cell{
        flex: 1;
        height: 43px;
        border-top: 1px solid #2595ba;
        border-left: 1px solid #2595ba;
        color: #f2f6f4;
        display: flex;
        align-items: center;
        justify-content: center;
        &:last-child{
          border-right: 1px solid #2595ba;
        }
      }
      &:last-child{
          border-bottom: 1px solid #2595ba;
      }
      &:nth-child(odd){
        background: #0a1f34;
      }
       &:nth-child(even){
        background: #083360;
      }
    }
    
  }

  .content5{
    display: flex;
    align-items: center;
    width: 100%;
    .item{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 2px solid #1ac9fb;

      .label{
        color: #f2f6f4;
        font-size: 18px;
        margin-right: 20px;
      }
      .val{
        font-size: 35px;
        color: #f2f6f4;
        font-weight: 600;
      }
      &:last-child{
        border-right: 0;
      }
    }
  }

</style>
